<script setup lang="ts">

import {IconDown} from "@arco-design/web-vue/es/icon";
import {useStore} from "@/stores/counter";
import {useRouter} from "vue-router";

interface doOptionType {
  name: string
  title: string
}

const store = useStore()
const router = useRouter()
const userInfo = store.userInfo

const doOptionType: doOptionType[] = [
  {name: "admin_article_list", title: "文章列表"},
  {name: "admin_user_list", title: "用户列表"},
  {name: "logout", title: "注销退出"},
]

function select(value: any) {
  if (value === "logout") {
    store.logout()
    router.push({name: "admin_login"})
    return
  }
  router.push({
    name: value
  });
}
</script>

<template>
  <div class="blog_user_info_menu">
    <a-dropdown @select="select">
      <div class="blog_user_info_menu_dropdown">
        <img
            :src="userInfo.avatar"
            alt="">
        <span class="blog_user_info_menu_dropdown_span">
          {{ userInfo.nick_name }}
        </span>
        <IconDown></IconDown>
      </div>
      <template #content>
        <a-doption v-for="item in doOptionType" :key="item.name" :value="item.name">
          {{ item.title }}
        </a-doption>
      </template>
    </a-dropdown>
  </div>
</template>

<style lang="scss">
.blog_user_info_menu {
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .blog_user_info_menu_dropdown {
    display: flex;
    align-items: center;
    cursor: pointer;

    .blog_user_info_menu_dropdown_span {
      margin: 0 5px;
    }
  }
}
</style>
